<template>

	<tui-list-cell :hover="false" :arrow="theOptions.readonly?false:true">
		<view class="rate_line">
			<view class="rate_title">
				<text v-show="theRules&&theRules[0]&&theRules[0].required" class="isrequire">*</text>
				<text>{{label}}</text>
			</view>
			<view class="rate_content">
				<rate-comp :margin="6" :max="theOptions.max" :isFill="theOptions.hollow" :color="theOptions.normal" :activeColor="theOptions.active"
				 :value="theOptions.current" :disabled="theOptions.disabled" :isHalf="theOptions.allowHalf" @change="changeStar"></rate-comp>
			</view>
		</view>
	</tui-list-cell>

</template>

<script>
	import rateComp from './uni-rate.vue'
	export default {
		name: 'kmlc-rate',
		props: {
			label: {
				type: String
			},
			emData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			options: {
				type: Object
			},
			rules: {
				type: Array
			},
		},
		components: {
			rateComp
		},
		data() {
			return {
				theOptions: {},
				theRules: [],
				isHalf: false,
			};
		},
		watch: {
			emData: function(val) {
				this.theOptions.current = val.options.defaultValue; //重置数据
			},

		},
		created() {
			if (this.emData && this.emData.options) {
				this.theOptions = this.emData.options;
				if (this.emData.rules) {
					this.theRules = this.emData.rules
				};
			} else {
				this.theOptions = this.options;
			}
			this.isHalf = this.theOptions.allowHalf;
		},
		methods: {
			changeStar(e) {
				this.theOptions.current = e.value;
				this.$emit('onChangeVal', {
					value: e.value
				});
			}
		},
	}
</script>

<style>
	.isrequire{
		color: #d41200;
	}
	
	.rate_line {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.rate_title {
		min-width: 100upx;
		line-height: 32rpx;
		flex-shrink: 0;
	}

	.rate_content {
		max-width: 100%;
		min-width: 50%;
		background: #FFFFFF;
		padding: 12upx 0upx;
		box-sizing: border-box;
	}
</style>
